<template>
	<view>
		<view v-if="visible" class="city-picker">
			<view class="picker-overlay" @click="hidePicker"></view>
			<view class="picker-content">
				<picker mode="multiSelector" :value="pickerValue" :range="cityPickerData" @change="onCityChange"
					@columnchange="onPickerColumnChange">
					<view class="picker-display">{{ displayText }}</view>
				</picker>
				<view class="picker-buttons">
					<button @click="confirmPicker">确定</button>
					<button @click="hidePicker">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false,
			},
			initialValue: {
				type: Array,
				default: () => [0, 0, 0],
			},
		},
		data() {
			return {
				cityPickerData: [
					[],
					[],
					[]
				], // 省市区数据
				pickerValue: [0, 0, 0], // 当前选择的索引
				displayText: '请选择省市区', // 显示的文字
			};
		},
		mounted() {
			this.loadCityData();
			this.pickerValue = [...this.initialValue];
		},
		methods: {
			// 加载省市区数据
			loadCityData() {
				// 示例数据结构（实际可从接口获取）
				const data = [{
						name: '安徽省',
						cities: [{
							name: '蚌埠市',
							districts: ['禹会区', '龙子湖区', '淮上区'],
						}, ],
					},
					{
						name: '江苏省',
						cities: [{
							name: '南京市',
							districts: ['鼓楼区', '玄武区', '秦淮区'],
						}, ],
					},
				];

				// 初始化省市区数据
				const provinces = data.map((p) => p.name);
				const cities = data[0].cities.map((c) => c.name);
				const districts = data[0].cities[0].districts;

				this.cityPickerData = [provinces, cities, districts];
			},
			// 切换列数据
			onPickerColumnChange(e) {
				const column = e.detail.column;
				const value = e.detail.value;

				if (column === 0) {
					// 更新城市和区县
					const selectedProvince = this.cityPickerData[0][value];
					const cities = this.getCitiesByProvince(selectedProvince);
					const districts = this.getDistrictsByCity(cities[0]);

					this.cityPickerData[1] = cities;
					this.cityPickerData[2] = districts;
					this.pickerValue = [value, 0, 0];
				} else if (column === 1) {
					// 更新区县
					const selectedCity = this.cityPickerData[1][value];
					const districts = this.getDistrictsByCity(selectedCity);

					this.cityPickerData[2] = districts;
					this.pickerValue[1] = value;
					this.pickerValue[2] = 0;
				} else if (column === 2) {
					this.pickerValue[2] = value;
				}
			},
			// 确定选择
			confirmPicker() {
				const [provinceIndex, cityIndex, districtIndex] = this.pickerValue;
				const province = this.cityPickerData[0][provinceIndex];
				const city = this.cityPickerData[1][cityIndex];
				const district = this.cityPickerData[2][districtIndex];

				this.displayText = `${province}/${city}/${district}`;
				this.$emit('confirm', `${province}/${city}/${district}`);
				this.hidePicker();
			},
			// 隐藏选择器
			hidePicker() {
				this.$emit('update:visible', false);
			},
			// 获取城市列表
			getCitiesByProvince(province) {
				const data = [{
					name: '安徽省',
					cities: [{
						name: '蚌埠市',
						districts: ['禹会区', '龙子湖区', '淮上区'],
					}, ],
				}, ];
				const selected = data.find((p) => p.name === province);
				return selected ? selected.cities.map((c) => c.name) : [];
			},
			// 获取区县列表
			getDistrictsByCity(city) {
				const data = [{
					name: '蚌埠市',
					districts: ['禹会区', '龙子湖区', '淮上区'],
				}, ];
				const selected = data.find((c) => c.name === city);
				return selected ? selected.districts : [];
			},
		},
	};
</script>

<style scoped>
	.city-picker {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		display: flex;
		align-items: flex-end;
	}

	.picker-content {
		background: #fff;
		width: 100%;
		padding: 20px;
	}

	.picker-buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
	}

	.picker-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}

	.picker-display {
		padding: 10px;
		border: 1px solid #ddd;
		background: #f9f9f9;
		border-radius: 5px;
		text-align: center;
	}
</style>